<template>
  <a-form-model-item :label="label" :prop="prop">
    <a-select
      class="readonlySelect"
      v-if="readonly"
      v-model="value"
      disabled
      :placeholder="placeholder"
      :maxTagCount="maxTagCount"
      style="width: 100%;background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;"
    >
      <a-select-option :value="item[replaceFields.value]" v-for="(item, index) in optList" :key="index">{{ item[replaceFields.label] }}</a-select-option>
    </a-select>
    <a-select
      v-else
      v-model="value"
      mode="multiple"
      style="width: 100%"
      :disabled="disabled"
      :placeholder="placeholder"
      :maxTagCount="maxTagCount"
      @change="handleChange"
    >
      <a-select-option :value="item[replaceFields.value]" v-for="(item, index) in optList" :key="index">{{ item[replaceFields.label] }}</a-select-option>
    </a-select>
  </a-form-model-item>
</template>

<script>
import { aFaultString } from '@/utils/frequentInterface';
export default {
  name: 'ResealSelect',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 映射children，title,value,key字段
    replaceFields: {
      type: Object,
      default: () => {
        return {
          label: 'name', value: 'code'
        };
      }
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    maxTagCount: {
      type: Number,
      default: 1
    },
    // 可输入搜索 未开发
    // search: {
    //   type: Boolean,
    //   default: true
    // },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    parentData: function() {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      return this.analysisAttribute(this.form)[key];
    }
  },
  watch: {
    parentData: {
      handler: function(n) {
        this.value = this.transcodingValue(n);
      },
      immediate: true
    }
  },
  data() {
    return {
      optList: [],
      value: ''
    };
  },
  created() {
    const arr = aFaultString();
    var obj;
    for (var i = 0; i < arr.length; i++) {
      if (arr[i]) {
        obj = {
          name: arr[i],
          code: i
        };
        this.optList.push(obj);
      }
    }
  },
  methods: {
    handleChange(e) {
      const value = this.transcodingThirtyTwoBits(e);
      this.$emit('change', value);
      this.analysisAttribute(this.form, value);
    },
    /**
     * [transcodingThirtyTwoBits 转码成32位二进制数据]
     * @param  {[type]} e [description]
     * @return {[type]}   [description]
     */
    transcodingThirtyTwoBits(e) {
      var value = '';
      for (var i = 0; i < 32; i++) {
        if (e.includes(i)) {
          value = value + 1;
        } else {
          value = value + 0;
        }
      }
      return value;
    },
    /**
     * [transcodingValue 转码成组件value]
     * @param  {[type]} e [description]
     * @return {[type]}   [description]
     */
    transcodingValue(e) {
      var value = [];
      if (e) {
        for (var i = 0; i < e.length; i++) {
          if (Number(e[i])) {
            value.push(i);
          }
        }
      }
      return value;
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0) {
        object[arr[index++]] = val;
      } else {
        return object;
      }
    }
  }
};
</script>
<style>
  .readonlySelect .ant-select-selection{
    background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;
  }
</style>
